const { resolve } = require('path')
//引入打包html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入抽取css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css的插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
  // 配置入口
  entry: './src/index.js',
  // 配置出口
  output: {
    // 打包之后的js文件的文件名
    filename: './js/build.js',
    // 打包之后的js文件所处的文件夹的路径(要求必须是绝对路径)
    path: resolve(__dirname, '../build'),

    clean: true, //每次打包之前先将build文件夹清空
  },

  mode: 'production', //表单当前是开发环境 js代码不会被压缩
  // 配置加载器
  module: {
    rules: [
      // 利用eslint检查js代码规范
      {
        test: /\.js$/, // 只检测js文件
        exclude: /node_modules/, // 排除node_modules文件夹
        enforce: 'pre', //可能值: "pre" | "post". pre表示前置执行, post表示后置执行
        use: {
          // 使用eslint-loader解析
          loader: 'eslint-loader',
        },
      },
      // 利用babel处理js兼容性问题
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },

      // 处理less文件
      {
        test: /\.less$/,
        // 当前less需要三个loader来处理
        // 所以use后面写的数组.
        // 数组中loader的执行顺序也是从右往左/或从后往前
        // less-loader就是将less代码解析成css代码
        // css-loader 就是将css代码编译成commonjs的形式加入到js文件
        // style-loader 就是把js文件中插入的css代码,以内嵌的形式加入到html中
        // MiniCssExtractPlugin.loader 将抽取出来的css文件,以外链的形式加入到html中
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },

      // 处理css
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
      // 处理静态资源文件,直接打包到build文件夹中
      // {
      //   test: /\.(png|jpe?g|gif)$/,
      //   type: 'asset/resource',
      // },
      // 把静态资源处理成base64格式(一般都是将体积小的图片转成base64)
      // {
      //   test: /\.svg$/,
      //   type: 'asset/inline',
      // },
      // 读取文件内容
      {
        test: /\.txt/,
        type: 'asset/source',
      },
      // 小于3kb的图片会转成base64格式,大于的不会转base64
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 3 * 1024, // 小于3kb以下的图片会被打包成base64格式
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      //告诉当前插件,创建html文件时,请以public/index.html为模块
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin({
      // filename用来配置抽取出来的css代码的名字
      filename: 'css/[name].[contenthash:8].css',
    }),
    new CssMinimizerPlugin({}),
  ],
  // 处理css兼容性问题,处理的目标是browserslist的配置内容
  target: 'browserslist',
}
